<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>预定会议室</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,maximum-scale=1.0,user-scalable=0">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <link rel="stylesheet" href="css/sm.css">
  <link rel="stylesheet" href="font/iconfont.css">
  <style>
  .bar-nav {
    background: #f90;
  }

  .title {
    color: #fff;
  }

  .content-block {
    margin: 0;
    margin-top: 1rem;
  }

  .popup-about .content-block {
    margin-top: 0;
  }

  .bar-nav.search-person {
    background: #dfdfe0;
  }

  .bar {
    z-index: 16;
  }

  .popup .bar-head {
    height: 4rem;
  }

  .popup .bar .head-search {
    background: none;
    height: 3.5rem;
    margin-top: 0.2rem;
  }

  .popup .bar .head-search .button {
    top: -0.05rem;
    height: 2.8rem;
    line-height: 2.8rem;
    width: 20%;
    margin-left: 2%;
    background-color: #f90;
    font-weight: bold;
  }

  .popup .bar .head-search .search-input {
    margin: 0;
  }

  .popup .bar .panel-icon {
    font-size: 1.5rem;
    padding-top: 0.7rem;
    line-height: 1.8rem;
  }

  .popup .bar .head-search .search-input input {
    border: 1px solid #ccc;
    height: 2.8rem;
  }

  .list-block .item-title.label {
    width: 30%;
  }

  .step-list {
    margin-top: 0rem;
  }

  .personnel-list ul {
    background: #fff;
  }

  .personnel-list ul li {
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid rgba(219, 218, 218, 0.31);
    padding: 0 .5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .personnel-list ul li:active {
    background: #e7e7e7;
  }

  .personnel-list .select-person {
    float: left;
    color: #fff;
    width: 1.2rem;
    height: 1.2rem;
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 50%;
    margin-top: 0.9rem;
    margin-right: 0.5rem;
  }

  .personnel-list .select-person .icon {
    font-size: 0.6rem;
    vertical-align: top;
    margin-top: -1rem;
    margin-left: 0.25rem;
  }

  .personnel-list .select-person.active {
    background: #34aeff;
    border-color: #34aeff;
  }

  .person-nav {
    height: 3.5rem;
    position: fixed;
  }

  .person-nav .select-contetn {
    background-color: #f8f8f8;
  }

  .person-nav .button {
    width: 5rem;
    height: 3rem;
    display: inline-block;
    float: right;
    line-height: 3rem;
    margin-right: 0.5rem;
    background-color: #f60;
    color: #fff;
    border-color: #f60;
  }

  .person-nav p {
    float: left;
    margin-left: 0.5rem;
    color: #f60;
  }

  .no-data {
    left: 30%;
    display: none;
  }

  .no-data .iconfont {
    font-size: 1rem;
    margin-right: 0.5rem;
  }

  .popup .bar-nav ~ .content {
    top: 4.2rem;
  }

  .personel-content dd,
  .personel-content dt {
    clear: both;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0.4rem 0;
    margin: 0.8rem 0;
  }

  .personel-content dd p,
  .personel-content dt p {
    float: left;
    margin: 0;
  }

  .number {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
    background-color: #fb906a;
    border: 1px solid #fb906a;
    border-radius: 50%;
    margin-right: 0.5rem;
    color: #fff;
    font-size: 0.6rem;
    vertical-align: top;
  }

  .personel-content dd .iconfont,
  .personel-content dt .iconfont {
    float: right;
    margin-right: 0.5rem;
    color: #ccc;
    font-size: 1.2rem;
    margin-top: -0.2rem;
  }
  </style>
</head>

<body>
  <div class="page-group">
    <div class="page page-current">
      <div class="content">
        <div class="list-block step-list">
          <ul class="meeting-list">
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <label class="item-title label" for="useDate">会议日期:</label>
                  <div class="item-input">
                    <input type="text" id="useDate" name="useDate" readonly>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <label class="item-title label" for="meetingName">会议室:</label>
                  <div class="item-input">
                    <input type="text" id="meetingName" name="meetingName" readonly>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <label class="item-title label" for="meetingDate">会议时间:</label>
                  <div class="item-input">
                    <input type="text" id="meetingDate" name="meetingDate" readonly>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <label class="item-title label" for="meetingPersonnel">会议人员<span class="mandatory">*</span>:</label>
                  <div class="item-input personel-content" id="personelContent">
                    <input type="text" id="meetingPersonnel" name="meetingPersonnel" placeholder="请添加会议人员" readonly>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="item-content">
                <div class="item-inner">
                  <label class="item-title label" for="conferenceTheme">会议主题<span class="mandatory">*</span>:</label>
                  <div class="item-input">
                    <input type="text" id="conferenceTheme" name="conferenceTheme" placeholder="请输入会议主题">
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="content-block mandatory-btn">
          <div class="row">
            <div class="col-50"><a href="/my-booking.html" class="external button button-big button-fill button-danger" id="btnCancel">取消</a></div>
            <div class="col-50"><a href="javascript:;" class="button button-big button-fill button-success" id="submit">确定</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- About Popup -->
  <div class="popup popup-about" id="searchPopup">
    <header class="bar bar-nav bar-head search-person">
      <div class="search-box">
        <div class="searchbar row head-search">
          <div class="search-input col-80">
            <label class="icon icon-search" for="search"></label>
            <input type="search" id="search" autocomplete="off" placeholder='搜索名字或部门' />
          </div>
          <a class="button button-fill button-primary col-20" id="searchBtn">搜索</a>
        </div>
      </div>
    </header>
    <div class="content">
      <div class="personnel-list">
        <ul id="personnelList"></ul>
        <div class="no-data"><span class="iconfont icon-zanwushuju"></span>暂无数据</div>
      </div>
    </div>
    <nav class="bar bar-tab person-nav">
      <div>
        <p> 已选择<span id="personNumber">0</span>人</p> <a href="#" class="button" id="carryOut">添加</a></div>
    </nav>
  </div>
  <!--build:js js/common.min.js -->
  <script src="js/zepto.js"></script>
  <script src="js/sm.js"></script>
  <script src="js/common.js"></script>
  <!-- endbuild -->
  <script src="js/booking-meeting.js"></script>
</body>

</html>
